<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>国信安-教务系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<style>
		/* 移动端 */

		@media screen and (max-width: 768px) {
			.layui-layout-admin .layui-layout-left,
			.layui-layout-admin .layui-body,
			.layui-layout-admin .layui-footer {
				left: 0;
			}
			.layui-layout-admin .layui-side {
				left: -300px;
			}
		}

		.layui-table td img {
			width: 100%;
			height: 100%;
		}

		.layui-input {
			width: 175px;
		}

		.layui-unselect {
			width: 200px;
		}
		.layui-upload-img{
			width: 92px;
			height: 92px;
		}
	</style>

	<body>

<div class="layui-form" id="updateFileForm" lay-filter="edit-courseForm">
	<div class="layui-upload">
		<button type="button" class="layui-btn" id="test1">上传图片</button>
		<div class="layui-upload-list">
			<img class="layui-upload-img" id="demo1">
			<p id="demoText"></p>
		</div>
		<div style="width: 95px;">
			<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				<div class="layui-progress-bar" lay-percent=""></div>
			</div>
		</div>
	</div>
</div>
<hr/>
		<div class="layui-form" id="courseForm" lay-filter="edit-courseForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">原密码:</label>
					<div class="layui-input-inline" style="width: 200px;">
						<!--内层-->
						<input type="password" class="layui-input" name="old_paswsword">
					</div>
				</div>
			</div>
			<div class="layui-form-item" >
				<div class="layui-inline">
					<!--外层-->
					<!--不换行-->
					<label class="layui-form-label">新密码:</label>
					<div class="layui-input-inline" style="width: 200px;">
						<!--内层-->
						<input type="password" class="layui-input" name="new_paswsword">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="studentForm-submit" lay-filter="studentForm-filter">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			
		</div>

		<script src="js/layui.js"></script>
		<script>
			layui.use(['upload', 'element', 'layer'], function(){
				var $ = layui.jquery
						,upload = layui.upload
						,element = layui.element
						,layer = layui.layer;

				//常规使用 - 普通图片上传
				var uploadInst = upload.render({
					elem: '#test1'
					,field:"headImg"
					, url: 'uploadHeadImg' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
					, before: function (obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function (index, file, result) {
							$('#demo1').attr('src', result); //图片链接（base64）
						});

						element.progress('demo', '0%'); //进度条复位
						layer.msg('上传中', {icon: 16, time: 0});
					}
					, done: function (res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}else{
							console.log($(".layui-nav-img",window.parent.document).prop("src"));
							$(".layui-nav-img",window.parent.document).prop("src",res.data.src);
						}
						//上传成功的一些操作
						//……
						$('#demoText').html(''); //置空上传失败的状态
					}
					, error: function () {
						//演示失败状态，并实现重传
						var demoText = $('#demoText');
						demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
						demoText.find('.demo-reload').on('click', function () {
							uploadInst.upload();
						});
					}
					//进度条
					, progress: function (n, elem, e) {
						element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
						if (n == 100) {
							layer.msg('上传完毕', {icon: 1});

						}
					}
				});
			});
		</script>
	</body>
</html>